@use "sass:color";
@use "sass:math";
$primary-color:#2d8cf0 !default;
$border-color:#dcdcdc !default;
$disabled-color:#f3f3f3 !default;
$icon-color:#999 !default;
$color:#333 !default;
$tag-color:#333 !default;
$tag-delete-color:#999 !default;
$tag-bg-color:#f7f7f7 !default;
$popup-color:#333 !default;
$popup-bg-color:#fff !default;
$hint-color:#999 !default;
$hover-color:rgba(0,0,0,0.08) !default;
$height:30px !default;
$item-height:30px !default;
$tag-height:20px !default;
$radius:4px !default;
$popup-radius:4px !default;
$tag-radius:4px !default;
$gap:6px !default;
$item-padding:0 10px !default;
$tag-padding:0 6px !default;
$round-padding:3px !default;
$content-size:14px !default;
$popup-content-size:14px !default;
$tag-content-size:12px !default;
$icon-size:16px !default;
$transition:.2s ease !default;
$disabled-opacity:0.65 !default;
$popup-shadow:0 1px 6px rgb(0,0,0,0.2) !default;
$shadow-box:0 0 0 2px !default;
$index:9999 !default;

$content-height:$height - 2 !default;
$tag-gap: math.div($content-height - $tag-height,4) !default;
$tag-disabled-bg-color:color.scale($tag-bg-color,$lightness:-10%) !default;
$tag-disabled-border-color:color.scale($border-color,$lightness:-10%) !default;
$active-color:$primary-color !default;
$active-bg-color: color.adjust($primary-color,$alpha:-0.92) !default;
$shadow:#{$shadow-box} color.adjust($primary-color,$alpha:-0.8) !default;